<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-divider v-if="this.$route.params.uid == this.$store.state.storeUserInfo.id"
                    content-position="right"
                    class="al-m-top-50px">
          <div style="">
            <el-radio-group v-model="myAppointment"
                            size="medium"
                            @change="handleRadioChange"
            >
              <el-radio-button label="我发布的"></el-radio-button>
              <el-radio-button label="我接单的"></el-radio-button>
            </el-radio-group>
          </div>
        </el-divider>


        <!-- 显示信息 -->
        <div v-if="showOrder == false">

          <div v-if="appointment.list != 0">
            <div class="al-flex-justify-space-between al-flex-wrap">
              <div v-for="(item, index) in this.appointment.list"
                   class="al-hover-transform-scale-1-1"
                   :key="index">
                <div class="al-box-pretty al-cursor-pointer al-hover-shadow"
                     style="width: 300px; height: 500px"
                     @click="goPage('/appointment/detail/' + item.id)"
                >
                  <DescText :plain-text="item"/>

                  <div class="al-m-top-10px ">
                    <ALImage :src="item.image"
                             fit="cover"
                             style="height: 100%"
                             class="al-width-100"></ALImage>
                  </div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="al-flex-container-center-h al-m-10px">
              <el-pagination
                      background
                      :page-size="appointment.pageSize"
                      @next-click="getAppointmentByUserId(appointment.nextPage)"
                      @prev-click="getAppointmentByUserId(appointment.prePage)"
                      @current-change="handleCurrentChangeAppointment"
                      layout="prev, pager, next"
                      :total="appointment.total">
              </el-pagination>
            </div>
          </div>

          <div v-else>
            <EmptyTip />
          </div>

        </div>


        <!--显示订单-->
        <div v-else>
          <div v-if="order.list != 0">
            <div v-for="(item, index) in order.list"
                 class="al-box-pretty al-hover-shadow"
                 :key="index">
              <el-divider content-position="right">
                <el-badge :value="item.type" class=""></el-badge>
              </el-divider>
              <el-row>
                <el-col :span="8">
                  <ALImage :src="item.image" fit="cover" style="height: 250px"></ALImage>
                </el-col>
                <el-col :span="16">
                  <div class="al-m-left-30px">
                    <div>
                      <span class="al-font-color-grey">订单号 </span>
                      <span>{{item.orderNo}}</span>
                    </div>
                    <div>
                      <span class="al-font-color-grey">标题 </span>
                      <span>{{item.title}}</span>
                    </div>
                    <div>
                      <span class="al-font-color-grey">要求 </span>
                      <span>{{item.ask}}</span>
                    </div>
                    <div>
                      <span class="al-font-color-grey">地点 </span>
                      <span>{{item.address}}</span>
                    </div>
                    <div>
                      <span class="al-font-color-grey">类型 </span>
                      <span>{{item.type}}</span>
                    </div>
                    <div>
                      <span class="al-font-color-grey">约拍时间 </span>
                      <span>{{item.startDatetime}}</span>
                    </div>

                    <div class="al-m-top-20px">
                      <el-button round plain @click="deleteButton(item.id)">删除</el-button>
                    </div>
                  </div>
                </el-col>
              </el-row>

              <el-divider content-position="left">
                <span class="al-text-color-light-black">创建于</span>
                {{item.createTime}}
              </el-divider>

            </div>

            <!-- 分页 -->
            <div class="al-flex-container-center-h al-m-10px">
              <el-pagination
                      background
                      :page-size="order.pageSize"
                      @next-click="getOrderByUserId(order.nextPage)"
                      @prev-click="getAppointmentByUserId(order.prePage)"
                      @current-change="handleCurrentChangeOrder"
                      layout="prev, pager, next"
                      :total="order.total">
              </el-pagination>
            </div>
          </div>

          <div v-else>
            <EmptyTip />
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 弹窗提示 -->
    <el-dialog
            title="删除约拍"
            :visible.sync="dialogTip"
            width="30%">
      <div class="al-box-container">
        <ALImage :src="tipImage" class="al-width-50" />
        <div class="al-fontsize-20px">
          确认删除？
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" round
                   @click="confirmDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {request} from "../../../util/network/request";
  import {LOCAL_BASE_URL, LOCAL_GATEWAY_URL} from "../../../util/network/api/base/api-base";
  import {APPOINTMENT_GET_BY_USER_ID} from "../../../util/network/api/appointment/api-appointment";
  import ALImage from "../../../components/public/ALImage";
  import DescText from "../../appointment/component/DescText";
  import {ORDER_DELETE, ORDER_GRT_BY_USER_ID} from "../../../util/network/api/order/api-order";
  import eventBus from "../../../util/bus/eventBus";
  import EmptyTip from "../../../components/public/EmptyTip";

  export default {
    name: "MyAppointment",
    components: {EmptyTip, DescText, ALImage},
    data(){
      return {
        uid: this.$route.params.uid,
        myAppointment: '我发布的',
        showOrder: false,
        appointment: {},
        order: {},
        dialogTip: false,
        tipImage: 'https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_online_chat_d7ek.png',
        deleteAppointmentId: 0
      }
    },

    created() {

    },

    mounted() {
      this.getAppointmentByUserId(this.uid, 1);
    },

    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      //约拍的分页页号点击事件
      handleCurrentChangeAppointment(pageNum) {
        this.getAppointmentByUserId(this.$route.params.uid, pageNum);
      },

      //通过用户id获取约拍
      getAppointmentByUserId(uid, pageNum = 1, pageSize = 6) {
        request({
          url: APPOINTMENT_GET_BY_USER_ID + uid + `?pageNum=${pageNum}&pageSize=${pageSize}`,
          method: 'get',
          headers: {}
        }).then(res => {
          // console.log(res);
          this.appointment = res.data.data;
        }).catch(err => {
          console.log(err)
        })
      },

      //通过用户id获取订单
      getOrderByUserId(uid, pageNum=1, pageSize=3) {
        this.showOrder = true;
        request({
          url: ORDER_GRT_BY_USER_ID + uid + `?pageNum=${pageNum}&pageSize=${pageSize}`
          // url: LOCAL_GATEWAY_URL + "order/get/uid/" + uid + `?pageNum=${pageNum}&pageSize=${pageSize}`
        }).then(res => {
          console.log(res);
          this.order = res.data.data;
        }).catch(err => {
          console.log(err)
        })
      },

      //监听约拍下的两个按钮的点击事件
      handleRadioChange(val) {
        console.log(val);
        if (val === "我接单的") {
          this.showOrder = true;
          this.getOrderByUserId(this.uid);
        } else if (val === "我发布的") {
          this.showOrder = false;
          this.getAppointmentByUserId(this.uid);
        }
      },

      //订单的分页页号点击事件
      handleCurrentChangeOrder(pageNum){
        this.getOrderByUserId(this.uid, pageNum);
      },

      //删除按钮监听事件
      deleteButton(appointmentId){
        this.dialogTip = true;
        this.deleteAppointmentId = appointmentId;
      },

      //弹窗确认
      confirmDialog(){
        this.dialogTip = false;
        console.log("删除约拍: " + this.deleteAppointmentId);
        this.deleteOrder(this.deleteAppointmentId)
      },

      //取消预约
      deleteOrder(orderId) {
        let data = {orderId};
        request({
          url: ORDER_DELETE,
          method: 'post',
          data: this.qsParam(data),
          headers: {}
        }).then(res => {
          // console.log(res);
          if (res.data.code === 1){
            this.$message.success("取消成功");
          }
        }).catch(err => {
          console.log(err);
          this.$message.info("服务器开小差了，请稍候再试");
        })
      },

    }
  }
</script>

<style scoped>

</style>
